React SPA デプロイしてみる Netlify編
最低条件
httpsでサイトに接続可能
例えば、Netlifyに対して/hogeとアクセスしたとしても、index.htmlの内容でかつ/hogeの内容が表示できるように。
（これはreact-router-domがアプリに設定されてる前提ではあるけど...）
環境変数を本番と開発でうまいこと分けれてる。
感想
hr.icon
めっちゃ簡単だわ...wwonigiri.w2.icon
色々やろうとすると、CloudFrontとか出てくるし。。。https設定とかも。
vercelはどんな感じかな。
やってみよう
hr.icon
1. create react appでサンプルアプリを作る。
$ yarn create react-app netlify-spa
2. github repository作る
3. netlifyで「new site」して、githubで連携する
4. あとはデフォルト設定のままデプロイ。
5. そしたら見れるようになる。
めっちゃ簡単だ...wonigiri.w2.icon
httpsだし。
ただ、まだ/hogeとかにアクセスしたらnot foundになるな。
6. netlify.tomlを作成して、コミットしてpush
code: netlify.toml
redirects
from = "/*"
to = "/index.html"
status = 200
これ、github更新したら、Netlifyで勝手に更新走るの最高だ...
7. お、うまくいった
8. 次はreact router domがある場合の挙動も試すか
9. /と/hogeにアクセスして、表示がどうなるか
いける
10. 環境変数もためそう
環境変数は、netlifyのところから設定する。簡単
11. うまくいった
参考